<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />		
		<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
		<link rel="stylesheet" href="../../css/order/qiShou_area.css" />
		<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
		<script src="http://webapi.amap.com/maps?v=1.3&key=6177359a00b81704aeb7c13890100a10"></script>
		<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back">
				<img src="../../img/order/back.png" alt="" />
			</a>
			<h1 class="mui-title">骑手位置</h1>
		</header>
		<div class="mui-content">
			<div id="container"></div>
            <div class="main_one">
            	<div class="one_top">
            		<p><img src="../../img/user/touxiang.png"/></p>
            		<p>
            			<span>骑手</span><span>·</span><span>于师傅</span>
            		</p>
            		<p>已接单</p>
            	</div>
            	<div class="one_bot">
            		<p>
            			<span>骑手电话</span>
            			<span>13000000000</span>
            			<span>
            				<a href="tel:18000000000">
            					<img src="../../img/order/iphone.png"/>
            				</a>
            			</span>
            		</p>
            		<p>
            		   <span>
            		   	跟您距离
            		   </span>
            		   <span>
            		   	据您0.8km
            		   </span>
            		</p>
            	</div>
            </div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/jquery-1.7.2.js"></script>
		<script src="../../js/tiaozhuan.js"></script>
		<script type="text/javascript">
			mui.init();							
			//初始化地图对象，加载地图
			var map = new AMap.Map("container", {
				resizeEnable: true,
				center: [113.573879, 34.805141], //地图中心点
				zoom: 11 //地图显示的缩放级别
			});
			window.onload=function(){
				infoWindow.open(map, marker.getPosition());//商家位置
			}			 			   
			//添加点标记，并使用自己的icon
		    var marker=new AMap.Marker({
				map: map,
				position: [113.573879, 34.805141],
				icon: new AMap.Icon({
					size: new AMap.Size(15, 21), //图标大小
					image: "../../img/order/home_icon_dw.png"
					//		            imageOffset: new AMap.Pixel(0, -60)
				})
			});
			//添加点标记，并使用自己的icon
		    var marker1=new AMap.Marker({
				map: map,
				position: [113.577879, 34.907141],
				icon: new AMap.Icon({
					size: new AMap.Size(15, 21), //图标大小
					image: "../../img/order/home_icon_dw.png"
					//		            imageOffset: new AMap.Pixel(0, -60)
				})
			});	
			//实例化信息窗体
			var content = '商家位置';	
			var infoWindow = new AMap.InfoWindow({
				isCustom: true, //使用自定义窗体
				content: createInfoWindow(content),
				offset: new AMap.Pixel(-2, 35)
			});

			//构建自定义信息窗体
			function createInfoWindow(content) {
				var info = document.createElement("div");
				info.className = "info mui-ellipsis";
				info.style.padding='13px 10px 5px 10px';
				info.style.maxWidth='150px';				
				info.style.maxHeight='40px';
				info.style.overflow='hidden';
				info.style.textAlign='center';
				info.style.fontSize='12px';
				info.style.lineHeight='23px';
				info.style.background='url(../../img/order/bm.png) no-repeat';
				info.style.backgroundSize='100% 100%';
                info.innerHTML = content;				
				return info;
			}      
			//文字标注
		    marker1.setLabel({//label默认蓝框白底左上角显示，样式className为：amap-marker-label
		        offset: new AMap.Pixel(-27, 25),//修改label相对于maker的位置
		        content: "骑手位置"
		    });
	        infoWindow.open(map, marker.getPosition());

		</script>
	</body>

</html>